<template>
  <div class="apps-box">
    <el-form :inline="true" :model="formData">
      <el-form-item label="关键字">
        <el-input v-model="formData.name" clearable placeholder="app名称" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formData.status" placeholder="全部">
          <el-option label="全部" value="" />
          <el-option label="有效" value="1" />
          <el-option label="停用" value="2" />
          <!-- <el-option label="冻结" value="3" /> -->
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="formLoading"
          type="primary"
          @click.stop="searchForm"
          >查询</el-button
        >
        <el-button @click.stop="clearForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-editable
      class="apps-list"
      v-loading="appsLoading"
      :data="appsList"
      height="200"
      :columns="appsColumns"
    >
      <template slot="default-appLogo" slot-scope="scope">
        <div class="logo-box">
          <!-- <icon-font
            class="icon-item"
            :icon="scope.row.appLogo || 'el-icon-setting'"
          /> -->
          <m-iconfont size="22" :icon="scope.row.appLogo || 'el-icon-setting'" />
        </div>
      </template>
      <template slot="default-operation" slot-scope="scope">
        <el-button
          size="small"
          @click.stop="toSysMenuPage(scope.row)"
          type="text text-primary"
          >配置</el-button
        >
        <el-button
          v-show="scope.row.status === 1"
          size="small"
          @click.stop="handleTableRowUpdateStatus(scope, 2)"
          type="text text-primary"
          >停用</el-button
        >
        <el-button
          v-show="scope.row.status === 2"
          size="small"
          @click.stop="handleTableRowUpdateStatus(scope, 1)"
          type="text text-primary"
          >启用</el-button
        >
        <el-button
          size="small"
          @click.stop="handleTableRowDel(scope)"
          type="text text-primary"
          >删除</el-button
        >
      </template>
    </el-editable>
    <el-dialog
      :title="flagUpdate ? '修改子系统' : '新增子系统'"
      height="250"
      @close="dialogClose"
      :visible.sync="dialogVisible"
      width="500px"
    >
      <el-form
        ref="dialogForm"
        v-loading="dialogLoading"
        :model="dialogFormData"
        :rules="formRules"
        label-width="130px"
      >
        <el-form-item label="分组名称" prop="groupCode">
          <el-select
            :loading="appGroupLoading"
            v-model="dialogFormData.groupCode"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in sysGroupArr"
              :key="index"
              :label="item.appGroupName"
              :value="item.appGroupCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属类型" prop="companyType">
          <el-select v-model="dialogFormData.companyType" placeholder="请选择">
            <el-option
              v-for="item in dialogFormData.companyTypeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="app名称" prop="appName">
          <el-input placeholder="请输入" v-model="dialogFormData.appName" />
        </el-form-item>
        <el-form-item label="app编码" prop="appCode">
          <el-input placeholder="请输入" v-model="dialogFormData.appCode" />
        </el-form-item>
        <el-form-item label="appLogo" prop="appLogo">
          <el-input placeholder="请输入" v-model="dialogFormData.appLogo" />
        </el-form-item>
        <el-form-item label="app地址" prop="domain">
          <el-input placeholder="请输入" v-model="dialogFormData.domain" />
        </el-form-item>
        <el-form-item label="app类型" prop="appType">
          <el-select v-model="dialogFormData.appType" placeholder="请选择">
            <el-option label="内部系统" value="1" />
            <el-option label="外部系统" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="子系统描述" prop="appDesc">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="dialogFormData.appDesc"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :loading="dialogBtnLoading" type="primary" @click="addApps"
          >确定</el-button
        >
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <!-- 分页插件 -->
    <el-pagination
      align="right"
      style="margin-top: 10px;"
      @size-change="sizeChange"
      @current-change="pageChange"
      :page-sizes="PAGE_NUMBER"
      :page-size="page.size"
      :current-page="page.page"
      :layout="PAGINATION_LAYOUT"
      :total="page.total"
    />
  </div>
</template>
<script>
import mIconfont from '@pc/m-components/m-iconfont';
import {appsColumns, formRules} from './const'
import ElEditable from '@components/el-editable/door/index.vue'
import {PAGINATION_LAYOUT, PAGE_NUMBER} from '@const/common.js'
import {
  appsList,
  appUpadate,
  addApps,
  deleteApps,
  updateApps,
  getAppGroups,
  commonGetAllEnums
} from '@const/api_staffCenter.js'
import {hasIn} from 'lodash'
import paginationMixin from '@mixins/paginationMixin.js'
export default {
  name: 'AppsName',
  mixins: [paginationMixin],
  components: {ElEditable, mIconfont},
  data() {
    return {
      appsColumns,
      formRules,
      appsList: [],
      appsLoading: false,
      formLoading: false,
      formData: {
        name: '',
        status: '',
        type: '' // 1是内部系统，2是外部系统
      },
      flagUpdate: false, // 修改按钮还是新增
      dialogFormData: {
        companyTypeArr: [],
        companyType: '',
        groupCode: '',
        appCode: '',
        appName: '',
        appLogo: '',
        domain: '',
        appType: '2',
        appDesc: ''
      },
      dialogVisible: false,
      dialogLoading: false,
      dialogBtnLoading: false,
      sysGroupArr: [],
      appGroupLoading: false,
      // 分页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT // 页码功能布局
    }
  },
  mounted() {
    this.getItems()
    this.addBtn()
    this.getAppGroups()
    this.getAllEnums()
  },
  methods: {
    getAllEnums() {
      this.$axios({
        method: 'GET',
        url: commonGetAllEnums
      })
        .then(res => {
          let data = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.dialogFormData.companyTypeArr = data.companyTypeEnum
        })
        .finally(() => {})
    },
    getAppGroups() {
      this.appGroupLoading = true
      this.$axios({
        url: getAppGroups,
        method: 'get'
      })
        .then(res => {
          this.sysGroupArr = hasIn(res, ['data', 'payload'])
            ? res.data.payload
            : []
        })
        .finally(() => {
          this.appGroupLoading = false
        })
    },
    addBtn() {
      this.$store.commit('changeLayoutHandle', {
        type: 'btn',
        arr: [
          {
            type: 'primary',
            val: '新增',
            handle: () => {
              this.flagUpdate = false
              this.dialogVisible = true
            }
          }
        ]
      })
    },
    searchForm() {
      this.page.page = 1
      this.getItems()
    },
    // 获取子系统列表
    getItems() {
      this.appsLoading = true
      this.$axios({
        url: `${appsList}?page=${this.page.page}&pageSize=${
          this.page.size
        }&appName=${this.formData.name || ''}&status=${this.formData.status ||
          ''}`,
        method: 'get',
        data: {
          id: '',
          appName: this.formData.name,
          status: this.formData.status,
          page: this.page.page,
          pageSize: this.page.size
        }
      })
        .then(res => {
          let obj = hasIn(res, ['data', 'payload']) ? res.data.payload : []
          this.appsList = obj.content || []
          this.page.total = obj.totalElements || 0
        })
        .finally(() => {
          this.appsLoading = false
        })
    },
    clearForm() {
      this.formData = {name: '', type: ''}
    },
    // 弹出层赋值
    pushData(row) {
      this.dialogFormData = {
        id: row.id,
        companyType: row.companyType,
        groupCode: row.groupCode,
        appCode: row.appCode,
        appName: row.appName,
        appLogo: row.appLogo,
        domain: row.domain,
        appType: row.appType,
        appDesc: row.appDesc
      }
    },
    // 修改按钮
    handleTableRowUpdate(scope) {
      this.pushData(scope.row)
      this.flagUpdate = true
      this.dialogVisible = true
    },
    // 停用按钮/修改子系统状态
    handleTableRowUpdateStatus(scope, status) {
      let tip =
        status === 1
          ? '此操作将停用该子系统, 是否继续?'
          : '此操作将启用该子系统, 是否继续?'
      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.appsLoading = true
        this.$axios({
          url: updateApps,
          method: 'POST',
          data: {
            id: scope.row.id,
            status: status
          }
        })
          .then(res => {
            this.getItems()
          })
          .finally(() => {
            this.appsLoading = false
          })
      })
    },
    // 删除按钮
    handleTableRowDel(scope) {
      this.$confirm('此操作将永久删除该子系统, 是否继续?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.appsLoading = true
        this.$axios({
          url: deleteApps,
          method: 'POST',
          data: {
            id: scope.row.id
          }
        })
          .then(res => {
            this.getItems()
          })
          .finally(() => {
            this.appsLoading = false
          })
      })
    },
    // 跳转子系统菜单配置页面
    toSysMenuPage(row) {
      this.$router.push({
        path: '/systemSetup/subsystemManagement/sysMenu',
        query: {
          id: row.id,
          name: row.appName
        }
      })
    },
    addApps() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          this.dialogBtnLoading = true
          let obj = {
            groupCode: this.dialogFormData.groupCode,
            appCode: this.dialogFormData.appCode,
            appName: this.dialogFormData.appName,
            appDesc: this.dialogFormData.appDesc,
            companyType: this.dialogFormData.companyType,
            // appSecret: 'app_secret_test02',
            appLogo: this.dialogFormData.appLogo,
            appType: this.dialogFormData.appType,
            domain: this.dialogFormData.domain
            // anstFlag: 0,
            // aableName: 'lable_Name_test02'
          }
          this.flagUpdate && (obj.id = this.dialogFormData.id)
          this.$axios({
            method: 'post',
            url: this.flagUpdate ? appUpadate : addApps,
            data: obj
          })
            .then(res => {
              if (res.data.code === '0') {
                this.$message.success('操作成功')
                this.getItems()
              }
            })
            .finally(() => {
              this.dialogVisible = false
              this.dialogBtnLoading = false
            })
        } else {
          return false
        }
      })
    },
    // 弹出层关闭触发操作
    dialogClose() {
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    }
  }
}
</script>
<style lang="less">
.btn-custom-cancel {
  float: right;
  margin-left: 10px;
}
.apps-box {
  display: flex;
  flex-direction: column;

  .apps-list {
    flex: 1;

    .logo-box {
      height: 60px;

      .icon-item {
        font-size: 50px;
        line-height: 60px;
      }
    }
  }
}
</style>
